<template>
  <div class="login-container" style="background: rgba(0,0,0,0.4);">
    <div class="logo" style="background: rgba(0,0,0,0.2);">
      <img src="../assets/5.png" alt="">
    </div>


    <el-form :model="user" :rules="userRules" ref="userForm" label-width="0px" class="loginform_style">
      <el-form-item prop="userName">
        <el-input  v-model="user.userName" prefix-icon="el-icon-user-solid" placeholder="输入您的用户名"></el-input>
      </el-form-item>
      <el-form-item prop="pwd">
        <el-input v-model="user.pwd" type="password" prefix-icon="el-icon-s-goods" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item class="btns">
        <el-button type="primary" @click="login" style="margin-left: 70px">登录</el-button>
        <el-button type="info" @click="resetForm">重置</el-button>
        <el-button type="text" style="margin-left: 50px" @click="kelogin">客户登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
    export default {
        name: "Login",
      data(){
        return{
          user:{
            userName:'',
            pwd:''
          },
          userRules:{
            userName: [
              { required: true, message: '请输入用户名', trigger: 'blur' },
            ],
            pwd:[
              {required: true, message: '请输入密码', trigger: 'blur'},
              { min: 6, message: '请输入6位以上的密码', trigger: 'blur' }
            ]
          }
        }
      },
      methods:{
          kelogin:function(){
            this.$router.push("/khlogin");
          },
          login:function () {
            this.user.pwd=this.$md5(this.user.pwd);
            this.$refs['userForm'].validate((valid) => {
              if (!valid) {
                return
              }
              this.$http.post("/finance-service-system/user/login",this.user).then(
                (res)=>{
                  if(res.data.success){
                    this.$message({
                      message:res.data.message,
                      type: 'success'
                    });
                    this.user=res.data.result.user;
                    window.sessionStorage.setItem("user",JSON.stringify(this.user));
                    window.sessionStorage.setItem("token",res.data.result.token);
                    this.$router.push('/home')
                  }else{
                    this.$message.error(res.data.message);
                  }
                }
              );
            });
          },
        resetForm:function () {
          this.$refs['userForm'].resetFields();
        }
      }
    }
</script>

<style scoped lang="less">
  .login-container {
    width: 450px;
    height: 314px;
    background-color: #fff;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;

    .logo {
      width: 130px;
      height: 130px;
      border: 1px solid #eee;
      border-radius: 50%;
      padding: 8px;
      box-shadow: 0 0 10px #eee;
      position: absolute;
      left: 50%;
      transform: translateX(-50%) translateY(-60px);
      background-color: #fff;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
      }
    }

    .loginform_style {
      padding: 0 20px;
      margin-top: 110px;
    }

    .btns {
      display: flex;
      justify-content: center;
    }
  }
</style>
